<aside class="main-sidebar" ng-class="{'mobile':mobile}">

  <!-- sidebar: style can be found in sidebar.less -->
  <section class="sidebar">

    <!-- Sidebar user panel (optional) -->
    <!-- <div class="user-panel">
      <div class="pull-left image">
        <img ng-src="{{user.img}}" class="img-circle" alt="User Image">
      </div>
      <div class="pull-left info">
        <p>{{user.name}}</p>
        <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
      </div>
    </div> -->

    <!-- search form (Optional) -->
    <!--form action="#" method="get" class="sidebar-form">
      <div class="input-group">
        <input type="text" name="q" class="form-control" placeholder="Search...">
            <span class="input-group-btn">
              <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
              </button>
            </span>
      </div>
    </form-->
    <!-- /.search form -->

    <!-- Sidebar Menu -->
    <ul class="sidebar-menu">

      <li class="header">BEEP App v2.2.1</li>
      <!-- Optionally, you can add icons to the links -->
      <!-- <li ng-class="{active: pageSlug == 'dashboard'}">
          <a ng-click="switchMenu($event, true, '/dashboard')">
            <i class="fa fa-dashboard"></i>
            <span ng-cloak>{{lang.dashboard}}</span>
          </a>
      </li>  -->
      <li ng-class="{active: pageSlug == 'locations'}">
          <a ng-click="switchMenu($event, true, '/locations')" data-toggle="{{ mobile ? 'offcanvas' : '' }}">
            <i class="fa fa-map-marker"></i>
            <span ng-cloak>{{lang.Locations}}</span>
          </a>
      </li>
      <li ng-class="{active: pageSlug == 'hives'}">
          <a ng-click="switchMenu($event, true, '/hives')" data-toggle="{{ mobile ? 'offcanvas' : '' }}">
            <i class="fa fa-archive"></i>
            <span ng-cloak>{{lang.Hives}}</span>
          </a>
      </li>
      <li ng-class="{active: pageSlug == 'groups'}">
          <a ng-click="switchMenu($event, true, '/groups')" data-toggle="{{ mobile ? 'offcanvas' : '' }}">
            <i class="fa fa-users"></i>
            <span ng-cloak>{{lang.Groups}}</span>
          </a>
      </li>
      <li ng-if="hasSensors" ng-class="{active: pageSlug == 'measurements'}">
          <a ng-click="switchMenu($event, true, '/measurements')" data-toggle="{{ mobile ? 'offcanvas' : '' }}">
            <i class="fa fa-line-chart"></i>
            <span ng-cloak>{{lang.measurements}}</span>
          </a>
      </li>
      <li ng-class="{active: pageSlug == 'sensors'}">
          <a ng-click="switchMenu($event, true, '/sensors')" data-toggle="{{ mobile ? 'offcanvas' : '' }}">
            <i class="fa fa-feed"></i>
            <span ng-cloak>{{lang.sensors}}</span>
          </a>
      </li>
      <!-- <li ng-class="{active: pageSlug == 'images'}">
          <a ng-click="switchMenu($event, true, '/images')" data-toggle="{{ mobile ? 'offcanvas' : '' }}">
            <i class="fa fa-photo"></i>
            <span ng-cloak>{{lang.Images}}</span>
          </a>
      </li> -->
      <li ng-class="{active: pageSlug == 'export'}">
        <a ng-click="switchMenu($event, true, '/export')" data-toggle="{{ mobile ? 'offcanvas' : '' }}">
          <i class="fa fa-file-excel-o "></i>
          <span ng-cloak>{{lang.Data_export}}</span>
        </a>    
      </li>     


      <li class="header">{{lang.research}}</li>
      
      <li ng-class="{active: pageSlug == 'research'}">
        <a ng-click="switchMenu($event, true, '/research')" data-toggle="{{ mobile ? 'offcanvas' : '' }}">
          <i class="fa fa-graduation-cap"></i>
          <span ng-cloak>{{lang.research}}</span>
        </a>    
      </li>     



      <li class="header">{{lang.info}}</li>
      
      <li data-toggle="{{ mobile ? 'offcanvas' : '' }}">
        <a ng-click="switchMenu($event, true, '/support')" data-toggle="{{ mobile ? 'offcanvas' : '' }}">
          <i class="fa fa-question"></i>
          <span ng-cloak>Helpdesk</span>
        </a>    
      </li>  
      <li data-toggle="{{ mobile ? 'offcanvas' : '' }}">
        <a ng-click="switchMenu($event, true, '/new')" data-toggle="{{ mobile ? 'offcanvas' : '' }}">
          <i class="fa fa-star"></i>
          <span ng-cloak>{{lang.Whats_new}}</span>
        </a>    
      </li>  
      <li data-toggle="{{ mobile ? 'offcanvas' : '' }}">
        <a ng-click="locale == 'nl' ? loadUrl('https://beep.nl') : loadUrl('https://beep.nl/home-english')">
          <i class="fa fa-info-circle"></i>
          <span ng-cloak>Beep {{lang.Website}}</span>
        </a>    
      </li>   
      <!-- <li data-toggle="{{ mobile ? 'offcanvas' : '' }}">
        <a ng-click="sendMail('feedback@beep.nl',lang.Feedback_mail_header, lang.Feedback_mail_body+lang.Diagnostic_info+'host:'+host+',user_id:'+user.id+',browser:'+browser)">
          <i class="fa fa-comment"></i>
          <span ng-cloak>{{lang.Feedback}}</span>
        </a>    
      </li>    -->

    </ul>
    <!-- /.sidebar-menu -->

  </section>
  <!-- /.sidebar -->
</aside>